<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Tag 标签</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.ml-2{
	margin-left: 12px;
}
.w-80{
	display: inline-block;
	width: 80px;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">由 type 属性来选择 tag 的类型。 也可以通过 color 属性来自定义背景色。</p>
	<el-tag class="ml-2">Tag 1</el-tag>
	<el-tag class="ml-2" type="success">Tag 2</el-tag>
	<el-tag class="ml-2" type="info">Tag 3</el-tag>
	<el-tag class="ml-2" type="warning">Tag 4</el-tag>
	<el-tag class="ml-2" type="danger">Tag 5</el-tag>
	
	<el-divider content-position="left">可移除标签</el-divider><!-- =============================================================== -->
	<p class="desc">设置 closable 属性可以定义一个标签是否可移除。 它接受一个 Boolean。 默认的标签移除时会附带渐变动画。</p>
	<p class="desc">如果不想使用，可以设置 disable-transitions 属性，它接受一个 Boolean，true 为关闭。 当 Tag 被移除时会触发 close 事件。</p>
	<el-tag closable class="ml-2" @close="handleClose0('tag-1')">Tag 1</el-tag>
	<el-tag closable class="ml-2" type="success">Tag 2</el-tag>
	<el-tag closable class="ml-2" type="info">Tag 3</el-tag>
	<el-tag closable class="ml-2" type="warning">Tag 4</el-tag>
	<el-tag closable class="ml-2" type="danger">Tag 5</el-tag>
	
	<el-divider content-position="left">动态编辑标签</el-divider><!-- =============================================================== -->
	<p class="desc">动态编辑标签可以通过点击标签关闭按钮后触发的 close 事件来实现。</p>
	<el-tag v-for="(v, k) in arr_show" closable class="ml-2" @close="handleClose(k)">{{v}}</el-tag>
	<el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="ml-2 w-80" size="small" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm"></el-input>
	<el-button v-else class="ml-2" size="small" @click="showInput"> + New Tag </el-button>
	
	<el-divider content-position="left">不同尺寸</el-divider><!-- =============================================================== -->
	<p class="desc">Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。</p>
	<p class="desc">使用 size 属性来设置额外尺寸, 可选值包括 large, default 或 small.</p>
	<el-row>
		<el-tag class="ml-2" size="large">Large</el-tag>
		<el-tag class="ml-2">Default</el-tag>
		<el-tag class="ml-2" size="small">Small</el-tag>
	</el-row>
	<br>
	<el-row class="mt-4">
		<el-tag class="ml-2" size="large" closable>Large</el-tag>
		<el-tag class="ml-2" closable>Default</el-tag>
		<el-tag class="ml-2" size="small" closable>Small</el-tag>
	</el-row>
	
	<el-divider content-position="left">主题</el-divider><!-- =============================================================== -->
	<p class="desc">Tag 组件提供了三个不同的主题：dark、light 和 plain。</p>
	<p class="desc">通过设置 effect 属性来改变主题，默认为 light。</p>
	<span>dark ： </span>
	<el-tag effect="dark" class="ml-2">Tag 1</el-tag>
	<el-tag effect="dark" class="ml-2" type="success">Tag 2</el-tag>
	<el-tag effect="dark" class="ml-2" type="info">Tag 3</el-tag>
	<el-tag effect="dark" class="ml-2" type="warning">Tag 4</el-tag>
	<el-tag effect="dark" class="ml-2" type="danger">Tag 5</el-tag>
	<br><br>
	<span>light ： </span>
	<el-tag effect="light" class="ml-2">Tag 1</el-tag>
	<el-tag effect="light" class="ml-2" type="success">Tag 2</el-tag>
	<el-tag effect="light" class="ml-2" type="info">Tag 3</el-tag>
	<el-tag effect="light" class="ml-2" type="warning">Tag 4</el-tag>
	<el-tag effect="light" class="ml-2" type="danger">Tag 5</el-tag>
	<br><br>
	<span>plain ： </span>
	<el-tag effect="plain" class="ml-2">Tag 1</el-tag>
	<el-tag effect="plain" class="ml-2" type="success">Tag 2</el-tag>
	<el-tag effect="plain" class="ml-2" type="info">Tag 3</el-tag>
	<el-tag effect="plain" class="ml-2" type="warning">Tag 4</el-tag>
	<el-tag effect="plain" class="ml-2" type="danger">Tag 5</el-tag>
	
	<el-divider content-position="left">圆形标签 > 2.1.7</el-divider><!-- =============================================================== -->
	<p class="desc">Tag 可以向按钮组件一样变为完全圆形。设置round属性为true即可</p>
	<el-tag effect="dark" round class="ml-2">Tag 1</el-tag>
	<el-tag effect="dark" round class="ml-2" type="success">Tag 2</el-tag>
	<el-tag effect="dark" round class="ml-2" type="info">Tag 3</el-tag>
	<el-tag effect="dark" round class="ml-2" type="warning">Tag 4</el-tag>
	<el-tag effect="dark" round class="ml-2" type="danger">Tag 5</el-tag>
	
	<el-divider content-position="left">可选中的标签</el-divider><!-- =============================================================== -->
	<p class="desc">有时候因为业务需求，我们可能会需要用到类似复选框的标签，但是按钮式的复选框的样式又不满足需求，此时我们就可以用到 check-tag组件。</p>
	<p class="desc">check-tag 的基础使用方法，check-tag 提供的 API 非常简单。</p>
	<el-check-tag checked style="margin-right: 8px">Checked</el-check-tag>
	<el-check-tag :checked="checked" @change="onChange">Toggle me</el-check-tag>
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			arr_show: {
				1: "Tag-1",
				2: "Tag-2",
				3: "Tag-3",
			},
			max_id: 3,
			inputValue: '',
			inputVisible: false,
			
			checked: false,
		}
	},
	computed: {
		
	},
	methods:{
		handleClose0(tag){
			console.log(tag);
		},
		handleClose(tag){
			delete this.arr_show[tag];
		},
		handleInputConfirm(){
			if(this.inputValue){
				this.max_id += 1;
				this.arr_show[this.max_id] = this.inputValue;
			}
			this.inputVisible = false;
			this.inputValue = '';
		},
		showInput(){
			this.inputVisible = true;
			this.$nextTick(()=>{
				// console.log(this.$refs);
				this.$refs.InputRef.focus();
			});
		},
		
		onChange(status){
			this.checked = status;
		}
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>